<template>
  <div class="box">
    <div class="content person-bg mb-20">
      <Selecurency
        ref="seleCurency"
        :listparam="{ currency_withdraw_status: true }"
        :currencyId="currencyId"
        @chainlist="chainlist"
        @getCurrency="getCurrency"
        @getCurrencyval="getCurrencyval"
        type="cash"
      />
      <div class="recharge-info">
        <div
          class="textperson-t3 text-14 text-left mb-12 text-bolder"
          v-if="isWithdrawUser"
        >
          {{ $t("assets.WithdrawTo") }}
        </div>
        <div
          class="radio-box flex flex-wrap text-14 mb-24 cash-radio"
          v-if="isWithdrawUser"
        >
          <div
            class="radio over-bg radius flex js-st align-center mb-8 point"
            v-for="(item, index) in state.typeList"
            :key="index"
            :class="{ 'bd-3D': state.type === item.id }"
            @click="typeChange(item.id)"
          >
            <el-radio v-model="state.type" :label="item.id">
              <span
                class="name text-14"
                :class="{ 'text-bold text-t1': state.type === item.id }"
                >{{ item.name }}</span
              >
            </el-radio>
          </div>
        </div>
        <div v-show="state.type === 1">
          <div class="textperson-t3 text-14 text-left mb-12 text-bolder">
            {{ $t("assets.selectLink") }}
          </div>
          <div class="mb-30 customerall">
            <el-select
              v-model="state.label"
              placeholder="Select"
              suffix-icon="CaretBottom"
            >
              <el-option
                v-for="(item, index) in state.urlList"
                :key="index"
                :label="item.chain_protocol.code"
                :value="index"
              >
                <span style="text-align: start;">{{
                  item.chain_protocol.code
                }}</span>
              </el-option>
            </el-select>
          </div>
          <div class="textperson-t3 text-14 text-left mb-12 text-bolder">
            {{ $t("assets.withdrawalAddress") }}
          </div>
          <div class="address-box flex js-sp align-center mb-12 ">
            <div
              class="input-box over-bg text-left text-14 flex js-sp align-center"
            >
              <input
                class="address over-bg"
                :placeholder="$t('assets.withdrawalAddressTip')"
                v-model="state.param.withdraw_address"
                type="text"
                name="withdraw_address"
              />
              <i
                class="el-icon-caret-bottom"
                @click="select"
                v-if="!state.isselect"
                style="color:#C4C4C4"
              ></i>
              <i
                class="el-icon-caret-top"
                @click="select"
                v-else
                style="color:#C4C4C4"
              ></i>
              <!-- 选择地址 -->
              <div
                class="select-address person-bg"
                v-loading="state.loading"
                v-if="state.isselect"
              >
                <div
                  class="address point"
                  @click="choiceAddress(item)"
                  v-for="item in state.addressList"
                  :key="item.id"
                >
                  {{ item.withdraw_address }}
                </div>
              </div>
            </div>
            <input
              v-if="state.param.is_save_address"
              class="lable-input over-bg text-14"
              :placeholder="
                $t('assets.label') + '（' + $t('assets.required') + '）'
              "
              v-model="state.param.label"
              type="text"
              name="is_save_address"
            />
            <el-checkbox v-model="state.param.is_save_address">
              {{ $t("assets.saveAddress") }}
            </el-checkbox>
          </div>
        </div>
        <div v-show="state.type === 2">
          <div class="text-14 flex align-center js-st mb-20">
            <div
              class="hand-tab point"
              @click="changeBind(1)"
              :class="
                state.bindType === 1
                  ? 'active-line text-bolder text-t1'
                  : 'color_98'
              "
            >
              {{ $t("assets.Email") }}
            </div>
            <div
              class="hand-tab point"
              @click="changeBind(2)"
              :class="
                state.bindType === 2
                  ? 'active-line text-bolder text-t1'
                  : 'color_98'
              "
            >
              {{ $t("assets.MobileNumber") }}
            </div>
          </div>
          <div class="mb-12 customerall" v-if="state.bindType === 1">
            <el-input
              class="bind-box"
              :placeholder="$t('assets.PayeeEmail')"
              v-model="state.param.user_email"
              type="text"
              onmousewheel="return false;"
            >
            </el-input>
          </div>
          <div class="mb-12 customerall" v-if="state.bindType === 2">
            <el-input
              class="bind-box"
              :placeholder="$t('assets.PayeeMobileNumber')"
              v-model="state.param.user_phone"
              type="number"
              onmousewheel="return false;"
              @change="(val) => test(val, 2)"
            >
            </el-input>
          </div>
        </div>
        <div class="mb-12 customerall">
          <el-input
            :placeholder="$t('assets.withdrawalAmountTip')"
            v-model="state.param.withdraw_amount"
            type="number"
            onmousewheel="return false;"
            @input="(val) => changePrice(val)"
          >
            <template #append>
              <span class="personlink text-14 point" @click="cashall">
                {{ $t("assets.withdrawAll") }}
              </span>
            </template>
          </el-input>
        </div>
        <div class="mb-12 customerall">
          <el-input
            :placeholder="$t('fiat.fundCode')"
            v-model="state.param.pay_password"
            type="number"
            onmousewheel="return false;"
         
          >
        
          </el-input>
        </div>
        
        <div class="textperson-t2 text-12 flex js-sp mb-12 family-d">
          <span>{{ $t("assets.availableBalance") }}：</span>
          <span>{{ $currency(state.cashInfo.balance) }}</span>
        </div>
        <div class="textperson-t2 text-12 flex js-sp mb-12 family-d">
          <div>{{ $t("assets.minWithdrawalAmount") }}:</div>
          <div>
            {{ $currency(state.cashInfo.currency.draw_min) }}
            {{ state.currency_name }}
          </div>
        </div>
        <div class="textperson-t2 text-12 flex js-sp mb-12 family-d">
          <span>{{ $t("user.withdrawalLimit") }}:</span>
          <span>
            {{ $currency(state.cashInfo.currency.draw_min) }}/{{
              $currency(state.cashInfo.currency.draw_max)
            }}
            <!-- BTC≈{{ $currency(state.cashInfo.currency_withdrawn_balance) }}/{{
              $currency(state.cashInfo.currency_withdrawn_amount)
            }} -->
            {{ state.currency_name }}
          </span>
        </div>
        <!-- <div class="textperson-t2 text-12 flex js-sp mb-30 family-d">
          <span>{{ $t("assets.DailyWithdrawal") }}:</span>
          <span>
            {{ $currency(state.cashInfo.currency_remaining_amount) }}/{{
              $currency(state.cashInfo.currency_withdraw_limit)
            }}
            {{ state.currency_name }}</span
          >
        </div> -->
        <div class="textperson-t3 text-14 flex js-sp mb-12 family-d">
          <span>{{ $t("assets.handlingFee") }}:</span>
          <span v-if="state.type === 2" class="text-t1 text-bold">
            {{ $t("assets.NoFee") }}
          </span>
          <span class="text-t1 text-bold" v-else>
            {{
              $currency(
                getfee(
                  state.param.withdraw_amount,
                  '*',
                  state.cashInfo.currency.draw_rate
                )
              )
            }}
            {{ state.currency_name }}
          </span>
        </div>
        <div class="textperson-t3 text-14 flex js-sp mb-12 family-d">
          <span>{{ $t("assets.actualAmount") }}:</span>
          <span class="text-t1 text-bold"
            >{{ $currency(actual()) }}
            {{ state.currency_name }}
          </span>
        </div>
        <el-button
          class="cash-btn radius login-btn text-16 share-color point mb-12"
          v-loading="state.loading"
          :disabled="isDisable"
          @click="cash"
        >
          {{ $t("assets.withdrawMoney") }}
        </el-button>
        <div class="text-12 text-warning" v-if="!state.flag">
          <i class="el-icon-warning-outline text-12 mr-3"></i
          ><span>{{ $t("assets.revokeTips") }}</span>
        </div>
      </div>
    </div>

    <div class="recharge-record person-bg">
      <div class="textperson-t3 text-left text-14 flex js-sp mb-8">
        <span>{{ $t("assets.withdrawalsRecord") }}</span>
        <router-link to="/person/AssetsRecord?active=2" class="personlink">
          {{ $t("assets.allRecords") }}
        </router-link>
      </div>
      <div>
        <Record ref="tableRef" :type="state.type" />
      </div>
    </div>
    <!-- 选择验证方式 -->
    <el-dialog
      :title="$t('user.identifyingWays')"
      :close-on-click-modal="false"
      top="25vh"
      v-model="state.dialogFonds"
      width="368px"
    >
      <Fonds v-on:onChoice="choiceFonds" />
    </el-dialog>
    <!-- 验证 -->
    <el-dialog
      :title="
        state.fonds === 1
          ? $t('user.phoneVerification')
          : state.fonds === 2
          ? $t('user.emailVerification')
          : state.fonds === 3
          ? $t('user.GoogleVerification')
          : state.fonds === 4
          ? $t('user.bindEmail')
          : $t('user.bindPhone')
      "
      v-model="state.dialogVerify"
      :close-on-click-modal="false"
      width="453px"
    >
      <div class="plr-10" v-if="state.dialogVerify">
        <PhoneFond
          ref="phonefond"
          @safSuccess="safSuccess"
          :param="{ user_phone_number: userserify.user_phone }"
          v-if="state.fonds === 1"
        />
        <EmailFond
          ref="emailfond"
          @safSuccess="safSuccess"
          :param="{ email: userserify.user_email }"
          v-if="state.fonds === 2"
        />
        <GugeFond
          ref="gugefond"
          @safSuccess="safSuccess"
          :fonds="state.googleFonds"
          v-if="state.fonds === 3"
        />
      </div>
    </el-dialog>
    <TipBox
      :dialog="state.tipDialog"
      :text="$t('assets.otheruserAdressTip')"
      @ViewContinue="handleContinue"
      @oncancer="handleClose"
    />
    <FailBox
      :dialog="state.failDialog"
      :text="state.text"
      @oncancer="handleClose"
    />
  </div>
</template>
<script>
import { reactive, ref, watch, computed, onMounted } from "vue";
import Selecurency from "./selectcurency.vue";
import {
  getWithdrawInfo,
  withdraw,
  userWithdrawAddress,
  userAssetsWithdrawCheck,
} from "@/api/assets";
import {
  drawCurrencyList
}from "@/api/user";
import { ElMessage } from "element-plus";
import Fonds from "@/components/personModel/verification/fonds.vue";
import PhoneFond from "@/components/personModel/verification/verifi-phone.vue";
import GugeFond from "@/components/personModel/verification/verifi-guge.vue";
import EmailFond from "@/components/personModel/verification/verifi-email.vue";
import TipBox from "@/components/cashBox/index.vue";
import FailBox from "@/components/cashBox/cashFail.vue";
import Record from "./record-cash.vue";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import { decimalDigitsInputFilter, toBeNumber } from "@/utils/common";
import { reduceFix } from "@/utils/precisionMath";
import {
  erc20Rule,
  omniRule,
  trc20Rule,
  positiveRule,
  emailRule,
  phoneRule,
} from "@/utils/formValidation";

export default {
  name: "CashBox",
  components: {
    Selecurency,
    Fonds,
    PhoneFond,
    GugeFond,
    EmailFond,
    Record,
    TipBox,
    FailBox,
  },
  props: { currencyId: Number },
  setup() {
    const { t } = useI18n();
    const state = reactive({
      urlList: [],
      typeList: [
        {
          id: 1,
          name: t("formTip.address"),
        },
        {
          id: 2,
          name: t("assets.PlatformUsers"),
        },
      ],
      checked: false,
      param: { is_save_address: false },
      cashInfo: {
        currency:{}
      },
      cashFeeInfo: {},
      keyObj: {},
      loading: false,
      fonds: 1,
      label: 0, //链路选择
      type: 1, //转账到地址或平台用户
      bindType: 1, //1:收款人邮箱，2：收款人手机
      dialogFonds: false,
      dialogVerify: false,
      tipDialog: false,
      failDialog: false,
      isselect: false,
      addressList: [], //地址列表
      currency_chain_name: "USDT",
      currency_chain_verify: "",
      currency_name: "",
      googleFonds: 1,
      key: "",
      currency: {},
      flag: false,
      text: "",
    });
    const seleCurency = ref();
    watch(
      () => state.label,
      (val, oldval) => {
        if (val !== oldval) {
          // state.param.withdraw_address = "";
          state.urlList.forEach((ele, index) => {
            if (state.label == index) {
              let obj = {
                withdraw_type: ele.withdraw_type,
                withdraw_value: ele.withdraw_value,
              };
              state.cashFeeInfo = { ...obj };
              state.currency_chain_name = ele.currency_chain_name;
              state.currency_chain_verify = ele.currency_chain_verify;
              getfee(
                state.param.withdraw_amount,
                state.cashFeeInfo.withdraw_type,
                state.cashFeeInfo.withdraw_value
              );
              actual();
            }
          });
        }
      }
    );
    const getCurrency = (val) => {
      state.currency_name = val;
    };
    const getCurrencyval = (val) => {
      state.currency = val;
    };
    /**
     * methods
     */
    const $store = useStore();
    const systemInfo = computed(() => {
      return $store.state.user.systemInfo;
    });
    const isDisable = computed(() => {
      return (
        (state.type === 1 && !state.param.withdraw_address) ||
        (state.type === 2 &&
          ((state.bindType === 1 && !state.param.user_email) ||
            (state.bindType === 2 && !state.param.user_phone))) ||
        !state.param.withdraw_amount
      );
    });
    watch(systemInfo, () => {
      isRevoke();
    });

    //是否需要显示撤销
    const isRevoke = () => {
      let list = $store.state.user.systemInfo;
      list.forEach((ele) => {
        if (ele.key === "cancel_withdraw_status") {
          state.flag = ele.value;
        }
      });
    };
    //是否需要显示提币到平台用户
    const isWithdrawUser = computed(() => {
      let list = $store.state.user.systemInfo;
      let flag = false;
      list.forEach((ele) => {
        if (ele.key === "withdraw_platform_user") {
          flag = ele.value;
          if (!flag) {
            state.type = 1;
          }
        }
      });
      return flag;
    });
    const userserify = $store.state.user.securityInfo;
    // 币种变动
    const chainlist = (val, id) => {
      state.label = 0;
      console.log(val,'val')
      console.log(id,'id------------')



      state.urlList = val;
        console.log(state.urlList,'state.urlListstate.urlListstate.urlList')
      state.currency_chain_name = val[0].chain_protocol.code;
      state.currency_chain_verify = val[0].chain_protocol.code;
      state.param.currency_id = val[0].currency_id;
      if (val.length > 0) {
        state.cashFeeInfo = val[0];
      }
      getcashInfo(id);
     
      refreshAdress();
    };
    const refreshAdress = () => {
      if (state.param.withdraw_address) {
        state.param.withdraw_address = null;
      }
      if (state.param.withdraw_amount) {
        state.param.withdraw_amount = "";
      }
    };
    // 改变提现金额
    const changePrice = (val) => {
      console.log(val);
      let tempV = toBeNumber(val);
      state.param.withdraw_amount = decimalDigitsInputFilter(
        tempV,
        state.currency?.number_accuracy
      );
    };
    const typeChange = (val) => {
      state.type = val;
      // tableRef.value.currentchange(0);
    };
    const linkChange = (val) => {
      console.log(val);
      refreshAdress();
      state.currency_chain_name = state.urlList[val].currency_chain_name;
      state.currency_chain_verify = state.urlList[val].currency_chain_verify;
    };
    // 获取提币信息
    const getcashInfo = (id) => {
      getWithdrawInfo({ id: id,account_type_id:1}).then((res) => {
        state.cashInfo = res.data;
        console.log(state.cashInfo,'state.cashInfo')
        console.log(state.cashInfo.currency.draw_min,'state.cashInfo.currency.draw_min')
        
      });
    };
    // 计算提币手续费
    const getfee = (price, type, fee) => {
      let num = "/";
      if (price && state.type === 1) {
        if (type == 1) {
          num = fee.toFixed(4);
        } else {
          num = (Number(price) * fee).toFixed(4);
        }
      } else if (price && state.type === 2) {
        num = 0;
      }
      return num;
    };
    // 计算实到金额
    const actual = () => {
      let price = "/";
      if (state.param.withdraw_amount) {
        price = decimalDigitsInputFilter(
          reduceFix(
            Number(state.param.withdraw_amount),
            getfee(
              state.param.withdraw_amount,
              '*',
              // state.cashFeeInfo.draw_rate
              state.cashInfo.currency.draw_rate
            )
          ),
          6
        );
      }
      return price;
    };
    // 选择地址
    const select = () => {
      state.isselect = !state.isselect;
      if (state.isselect) {
        getAddress();
      }
    };
    const choiceAddress = (item) => {
      state.param.withdraw_address = item.withdraw_address;
      state.param.label = item.label;
      state.isselect = false;
    };
    // 获取提现地址
    const getAddress = () => {
      let param = {
        currency_id: state.param.currency_id,
      };
      param.currency_chain_name =
        state.urlList[state.label].currency_chain_name;
      state.loading = true;
      userWithdrawAddress(param)
        .then((res) => {
          state.loading = false;
          state.addressList = res.data;
        })
        .catch(() => {
          state.loading = false;
        });
    };
    // 选择验证方式
    const choiceFonds = (i) => {
      state.fonds = i;
      state.dialogFonds = false;
      state.dialogVerify = true;
    };
    // 验证成功
    const safSuccess = (val) => {
      state.param.safety_verification_key = val.safety_verification_key;
      state.dialogVerify = false;
      gocash();
    };
    // 点击全部提现
    const cashall = () => {
      state.param.withdraw_amount = state.cashInfo.balance;
    };
    const tableRef = ref();
    const phonefond = ref();
    const emailfond = ref();
    const gugefond = ref();
    // 获取地址正则
    const getRule = () => {
      if (state.currency_chain_name) {
        return state.currency_chain_verify;
      }
      // switch (state.currency_chain_name) {
      //   case "ERC20":
      //     return erc20Rule;
      //   case "OMNI":
      //     return omniRule;
      //   case "TRC20":
      //     return trc20Rule;
      // }
    };
    //提现前校验
    const userCashCheck = () => {
      gocash();
      // handleContinue();

      return 
      state.param.type = state.type;
      if (state.type === 1) {
        state.param.currency_chain_name =
          state.urlList[state.label].currency_chain_name;
        state.param.user_email = null;
        state.param.user_phone = null;
      } else {
        if (state.bindType === 1) {
          let flag = test(state.param.user_email, 1);
          if (!flag) {
            return false;
          }
          state.param.user_phone = null;
        } else {
          state.param.user_email = null;
        }
        state.param.currency_chain_name = null;
        state.param.withdraw_address = null;
        state.param.label = null;
        state.param.is_save_address = false;
      }
      state.param.withdraw_amount = parseFloat(state.param.withdraw_amount);
      userAssetsWithdrawCheck(state.param)
        .then((res) => {
          if (res.code == 200) {
            state.keyObj = res.data;
            if (res.data.type_status === 3) {
              state.tipDialog = true;
            } else {
              handleContinue();
            }
          }
        })
        .catch((err) => {
          if (err.code == 63017) {
            state.text = t("assets.userAdressTip");
            state.failDialog = true;
          }
          if (err.code == 63019) {
            state.text = t("assets.selfTip");
            state.failDialog = true;
          }
          if (err.code == 63013 || err.code == 63014) {
            state.text = t("assets.noUserTip");
            state.failDialog = true;
          }
          if (err.code == 63020) {
            state.text = t("assets.testUserTip");
            state.failDialog = true;
          }
        });
    };
    const handleContinue = () => {
      state.dialogFonds = true;
      state.key = state.keyObj.key;
    };
    //校验邮箱或手机号码格式
    const test = (val, type) => {
      if (type === 1) {
        if (val) {
          if (!emailRule.reg.test(val)) {
            ElMessage.error(emailRule.message);
            return false;
          } else {
            return true;
          }
        } else {
          ElMessage.error(t("assets.enEmail"));
          return false;
        }
      } else {
        if (val) {
          if (!phoneRule.reg.test(val)) {
            ElMessage.error(phoneRule.message);
            return false;
          }
        } else {
          ElMessage.error(t("assets.enPhone"));
          return false;
        }
      }
    };
    // 点击提现
    const cash = () => {
      // console.log(erc20Rule, omniRule, trc20Rule);
      if (state.type === 1) {
        if (!state.param.withdraw_address) {
          ElMessage.error(t("assets.withdrawalAddressTip"));
          return;
        } else {
          // if (getRule()) {
          //   let reg = new RegExp(getRule());
          //   if (!reg.test(state.param.withdraw_address)) {
          //     ElMessage.error(t("formTip.walletAddressReg"));
          //     return;
          //   }
          // }
        }
      }
      if (!state.param.withdraw_amount) {
        ElMessage.error(t("assets.withdrawalAmountTip"));
        return;
      } else {
        if (!positiveRule.reg.test(state.param.withdraw_amount)) {
          ElMessage.error(positiveRule.message);
          return;
        }
      }
      console.log(state.param.withdraw_amount,state.cashInfo.balance)
      console.log(state.param.withdraw_amount>state.cashInfo.balance)
      // if (state.param.withdraw_amount > state.cashInfo.balance) {
      //   console.log('钱不够')
      //   ElMessage.error(t("assets.InsufficientBalance"));
      //   return;
      // }
      // if (
      //   state.param.withdraw_amount < state.cashInfo.currency_withdraw_minimum
      // ) {
      //   ElMessage.error(
      //     t("assets.MinimumWithdrawalAmount") +
      //       state.cashInfo.currency_withdraw_minimum
      //   );
      //   return;
      // }
      // if (
      //   state.param.withdraw_amount > state.cashInfo.currency_withdrawn_balance
      // ) {
      //   ElMessage.error(t("assets.withdrawalLimit"));

      //   return;
      // }
      // if (
      //   state.param.withdraw_amount > state.cashInfo.currency_remaining_amount
      // ) {
      //   ElMessage.error(
      //     t("assets.RemainingDailyLimit") +
      //       state.cashInfo.currency_remaining_amount +
      //       state.currency_name
      //   );
      //   return;
      // }
      // if (
      //   state.param.withdraw_amount > state.cashInfo.currency_withdrawn_balance
      // ) {
      //   ElMessage.error(t("assets.withdrawalLimit"));

      //   return;
      // }

      // if (state.param.is_save_address && !state.param.label) {
      //   ElMessage.error(t("assets.inremark"));
      //   return;
      // }
      if (actual() <= 0) {
        ElMessage.error(t("assets.handlingFeeTip"));
        return;
      }
      userCashCheck();
    };
    // 提现
    const gocash = () => {
      state.loading = true;
      state.param.user_withdraw_check_key = state.key;
      state.param.type = state.type;
      if (state.type === 1) {
        state.param.currency_chain_name =
          state.urlList[state.label].currency_chain_name;
        state.param.user_email = null;
        state.param.user_phone = null;
      } else {
        state.param.currency_chain_name = null;
        state.param.withdraw_address = null;
        state.param.label = null;
        state.param.is_save_address = false;
        if (state.bindType === 1) {
          state.param.user_phone = null;
        } else {
          state.param.user_email = null;
        }
      }
      console.log(state.urlList[state.label],'state.urlList[state.label]')
      state.param.pay_password=Number(state.param.pay_password)
      state.param.currency_id=state.param.currency_id
      state.param.number=state.param.withdraw_amount
      state.param.address=state.param.withdraw_address
      state.param.memo=''
      state.param.currency_protocol_id=state.urlList[state.label].id
      withdraw(state.param)
        .then((res) => {
          state.loading = false;
          if (res.code === 1) {
            ElMessage({
              type: "success",
              message: res.msg,
            });
            let param = {
              is_save_address: false,
              currency_id: state.param.currency_id,
              currency_chain_name: state.param.currency_chain_name,
            };
            state.param = { ...param };
            getcashInfo(state.param.currency_id);
            tableRef.value.getTable(state.type);
          }else{
            ElMessage.error(res.msg);
          }
        })
        .catch((err) => {
          state.loading = false;
          ElMessage.error(err);
        });
    };
    //提示弹窗关闭
    const handleClose = () => {
      state.tipDialog = false;
      state.failDialog = false;
    };
    const changeBind = (val) => {
      state.bindType = val;
    };
    onMounted(() => {
      isRevoke();
    });
    return {
      state,
      chainlist,
      getcashInfo,
      getfee,
      actual,
      cash,
      choiceFonds,
      userserify,
      safSuccess,
      gocash,
      select,
      getAddress,
      choiceAddress,
      cashall,
      tableRef,
      phonefond,
      emailfond,
      gugefond,
      linkChange,
      getRule,
      seleCurency,
      getCurrency,
      userCashCheck,
      refreshAdress,
      changePrice,
      getCurrencyval,
      systemInfo,
      isRevoke,
      typeChange,
      changeBind,
      handleContinue,
      isDisable,
      test,
      reduceFix,
      handleClose,
      isWithdrawUser,
    };
  },
};
</script>
<style>
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
<style scoped lang="less">
.lable-input {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.content {
  padding: 9px 12px 30px;
  box-sizing: border-box;
}
.recharge-info {
  width: 472px;
  margin: 0 auto;
}
.mr-3 {
  margin-inline-end: 3px;
}
.mb-12 {
  margin-bottom: 12px;
}
.mb-8 {
  margin-bottom: 8px;
}
.mb-30 {
  margin-bottom: 30px;
}
.mb-24 {
  margin-bottom: 24px;
}
.mb-20 {
  margin-bottom: 20px;
}
.mb-47 {
  margin-bottom: 47px;
}
.mb-8 {
  margin-bottom: 8px;
}
.radio-box {
  width: 100%;
}
.radio {
  width: 222px;
  height: 42px;
  padding: 0 15px;
  margin-inline-end: 28px;
}
.radio:nth-child(2n) {
  margin-inline-end: 0px;
}
// .name {
//   margin-inline-start: 58px;
// }
.bd-3D {
  border: 1px solid @blue;
}
.tip-box {
  width: 100%;
  height: 132px;
  padding: 12px;
  box-sizing: border-box;
}
.tip {
  width: 100%;
  height: 100%;
}
.tip-left {
  width: 128px;
  height: 100%;
  line-height: 108px;
}
.tip-right {
  width: 800px;
  line-height: 16.8px;
}
.recharge-record {
  width: 100%;
  padding: 30px 20px;
  box-sizing: border-box;
}
.input-box {
  width: 80%;
  margin-inline-end: 12px;
  height: 34px;
  border-radius: 36px;
  padding: 0 12px;
  position: relative;
}
.select-address {
  // width: 100%;
  min-height: 10px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 99;
  padding: 10px 20px;
  box-sizing: border-box;
}
.address {
  border: none;
  height: 34px;
  width: 80%;
}
.lable-input {
  width: 113px;
  height: 34px;
  border-radius: 36px;
  border: none;
  margin-inline-end: 12px;
  padding: 0 17px;
  box-sizing: border-box;
}
.cash-btn {
  width: 100%;
  height: 46px;
  // line-height: 46px;
}
.family-d {
  font-family: DINPro;
}
.hand-tab {
  min-height: 23px;
  margin-inline-end: 30px;
  position: relative;
  text-align: start;
}
.cash-radio {
  /deep/.el-radio__input.is-checked .el-radio__inner {
    background: #fff;
    border-color: @blue;
  }
  /deep/.el-radio__inner::after {
    width: 9px;
    height: 9px;
    background-color: @blue;
  }
  /deep/.el-radio__inner {
    border: 1px solid #c1c1c1;
  }
}
.customerall {
  /deep/.el-input__inner:focus + .el-input-group__append {
    border-color: #dcdfe6;
    outline: 0;
  }
  /deep/ .el-input-group__append {
    width: 30px;
    border: 1px solid #dcdfe6;
    border-left: none;
    background: none;
  }
  /deep/ .el-select,
  /deep/ .bind-box {
    width: 100%;
    .el-input__inner,
    .el-input__inner:hover,
    .el-input__inner:focus {
      border-right: 1px solid #dcdfe6;
    }
  }

  /deep/.el-input__inner {
    border-right: none;
  }
  /deep/.el-input__inner:focus,
  /deep/.el-input__inner:hover {
    outline: none;
    border-color: #dcdfe6;
    border-right: none;
  }
}
.is-rtl {
  .customerall {
    /deep/ .el-select,
    /deep/ .bind-box {
      width: 100%;
      .el-input__inner,
      .el-input__inner:hover,
      .el-input__inner:focus {
        border-left: 1px solid #dcdfe6;
      }
    }
    /deep/ .el-input__inner {
      // background: #f8f8f8;
      border-left: none;
      border: 1px solid #dcdfe6;
    }
    /deep/.el-input-group__append {
      width: 30px;
      border: 1px solid #dcdfe6;
      border-right: none;
      // background: #f8f8f8;
    }
    /deep/.el-input__inner {
      border-left: none;
    }
    :deep(.el-input-group__append) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    :deep(.el-input-group--append .el-input__inner) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
  }
}
.address-box /deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: @blue;
  border-color: @blue;
}
.address-box /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: @blue;
}
.recharge-info {
  /deep/.el-button.is-disabled,
  .el-button.is-disabled:focus,
  .el-button.is-disabled:hover {
    background-color: #3d67fa;
    color: #fff;
  }
}
</style>
